<script setup>

</script>

<template>
  <div class="tabbar">
    <ul>
<!--      <li><a href="#/films">电影</</a></li>-->
<!--      <li><a href="#/cinemas">影院</a></li>-->
<!--      <li><a href="#/center">我的</a></li>-->

<!--      <li>-->
<!--        <router-link to="/films" active-class="myclass">电影</router-link>-->
<!--      </li>-->
<!--      <li>-->
<!--        <router-link to="/cinemas" active-class="myclass">影院</router-link>-->
<!--      </li>-->
<!--      <li>-->
<!--        <router-link to="/center" active-class="myclass">我的</router-link>-->
<!--      </li>-->

      <!-- 定制router-link为我们指定的节点  isActive navigate是固定的   -->
      <router-link to="/films" custom v-slot="{isActive,navigate}">
        <li :class="isActive?'myclass':''" @click="navigate">电影</li>
      </router-link>

      <router-link to="/cinemas" custom v-slot="{isActive,navigate}">
        <li :class="isActive?'myclass':''" @click="navigate">影院</li>
      </router-link>

      <router-link to="/center" custom v-slot="{isActive,navigate}">
        <li :class="isActive?'myclass':''" @click="navigate">我的</li>
      </router-link>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: white;
  z-index: 100;
  ul{
    display: flex;
    list-style: none;
    li{
      flex: 1;
    }
  }
}

.myclass{
  color: red;
}

</style>